import React from 'react'
import { NavBar, Divider } from '@nutui/nutui-react'
import { Cart, ArrowLeft } from '@nutui/icons-react'
import { useLocation, useNavigate } from 'react-router-dom'
import { CartO, StarO, ServiceO } from '@react-vant/icons'
import { ActionBar, Swiper, Toast } from 'react-vant'
import "../css/xiang.scss"
export default function Xiang() {
    let nav = useNavigate()
    // 头部tab进行路由跳转，跳到路由搜索页面，暂时使用cate页面代替-----------------------------
    let To = () => {
        nav("/cate")
    }
    let { state } = useLocation()
    // 获取到传递过来的对象
    // console.log(state);
    let addshopcart = () => {
        console.log('button click 添加到购物车中')
        // 点击立即购买将商品信息添加到购物车中--------------------------，并进行页面跳转
    }
    return (
        // 对对象进行展示
        <div className='xiang_box'>
            {/* 一个外部盒子包起来这些用来让下面的购物车能够在下面展示 */}
            <div className='xiang_box_all'>
                {/* 头部导航 */}
                <div className='xiang_box_nav'>
                    <NavBar
                        style={{
                            height: "50px",
                            backgroundColor: "#ffffff",
                            fontSize: "20px",
                            margin: "0px"
                        }}
                        back={<ArrowLeft />}
                        onBackClick={() => { To() }}
                    >
                        <span>商品详情</span>
                    </NavBar>
                </div>
                {/* 照片轮播图盒子 */}
                <div className='xiang_box_img'>
                    <Swiper autoplay={2000}>{state.gallery.map((color, index) => (
                        <Swiper.Item key={color}>
                            <div
                                onClick={() => {
                                    Toast.info(`你点击了卡片 ${index + 1}`)
                                }}
                            >
                                <img src={color} alt=""></img>
                            </div>
                        </Swiper.Item>))}
                    </Swiper>
                </div>
                {/* 价格、商品介绍盒子 */}
                <div className='xiang_box_jieshao'>
                    <p>￥{state.price}</p>
                    <p>{state.name}&nbsp;{state.specTitle}</p>
                    <p>{state.desc}</p>
                </div>
                {/* 具体的冷藏、进口、推荐理由、四个块 */}
                <div className='xiang_box_four'>
                    <div className='xiang_box_four_one'>
                        <p>冷藏</p>
                        <p>存储条件</p>
                    </div>
                    <div className='xiang_box_four_two'>
                        <p>否</p>
                        <p>是否进口</p>
                    </div>
                    <div className='xiang_box_four_three'>
                        <p>果香浓郁</p>
                        <p>推荐理由</p>
                    </div>
                    <div className='xiang_box_four_four'>
                        <p>饱满多汁</p>
                        <p>存储条件</p>
                    </div>
                </div>
                {/* 一条灰色块 */}
                <div className='xiang_box_grey'></div>
                {/* 商品评价盒子 */}
                <div className='xiang_box_pingjia'>
                    {/* 评价数量和好评率 */}
                    <div className='ping'>
                        <span>评价{`(${state.comments.length})`}</span>
                        <span>好评率100%</span>
                    </div>
                    {/* 遍历评价进行展示----------------------------- */}
                    <div className='user_pingjia'>
                        {state.comments.map((item, index) => (
                        <div key={index} className='user_pingjia_box'>
                            <p>{item.user_id}</p>
                            {item.comment}
                        </div>
                        ))}
                    </div>
                </div>
                {/* 一条灰色块 */}
                <div className='xiang_box_grey'></div>
                {/* 商品详情 */}
                <div className='xiang_box_xiangqing'>
                    <h4 style={{ margin: "10px" }}>详情</h4>
                    {/* 遍历图片得了 */}
                    {state.gallery.map((item, index) => (
                        <img src={item} alt="" key={index} style={{ width: "100%" }} />
                    )
                    )}
                </div>
            </div>
            {/* 购物车栏 */}
            <div className='demo-action-bar'>
                <ActionBar>
                    <ActionBar.Icon
                        icon={<CartO />}
                        text='购物车'
                        badge={{ content: state.buyNum>0?state.buyNum:"" }}
                        onClick={() => console.log('cart click')}
                    />
                    <ActionBar.Icon
                        icon={<ServiceO />}
                        text='客服'
                        onClick={() => console.log('chat click')}
                    />

                    <ActionBar.Icon
                        icon={<StarO></StarO>}
                        text='收藏'
                        onClick={() => console.log('shop click')}
                    />
                    <ActionBar.Button
                        type='danger'
                        text='立即购买'
                        onClick={() => { addshopcart() }}
                    />
                </ActionBar>
            </div>
        </div>
    )
}
